<template>
  <div class="my-root nav">
    <div class="nav-top">
      <img src="../assets/img/logo.png" alt="VUE">
      <span>Vue.js</span>
    </div>
    <div>
      <form action="">
        <i class="fa fa-search"></i>
        <input type="text" @focus="focus">
      </form>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      focus(e) {
        e.target.className = 'white'
      },
      remo(e) {
        // console.log('888')
        e.target.removeClass = 'white'
      }
    }
  }

</script>
<style scoped>
  .nav {
    height: 110px;
    padding: 10px 0;
    color: white;
    background-color: #1c6132;
  }
  
  .nav-top {
   
    font-size: .5rem;
    text-align: center;
  }
  
  .nav-top img {
    display: inline-block;
    vertical-align: middle;
    width: 1rem;
  }
  
  .nav-top span {
    display: inline-block;
    vertical-align: middle;
  }
  
  form {
    text-align: center;
    position: relative;
  }
  
  input {
    width: 6rem;
    height: 0.6rem;
    border-radius: 10px;
    color: #ccc;
    padding-left: .8rem;
    background-color: #4f9639;
    border: none;
    transition: all 1s linear;
  }
  
  .white {
    background-color: white;
  }
  
  .nav i {
    font-size: 0.3rem;
    color: #ccc;
    position: absolute;
    top: 0.2rem;
    left: 2.2rem;
  }

</style>
